<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>迪丽热巴</li>
        <li>初音未来</li>
        <li>古力娜扎</li>
        <li>马尔扎哈</li>
    </ul>
    <script>
//利用事件冒泡，把子元素的事件委托给父级。再通过判断事件源做相应的操作
        var ul = document.querySelector('ul')
       ul.onclick = function(e){
           e = e || window.event
           var target = e.target || e.srcElement
           console.log('coclik')
           //判断事件源
           //判断事件源 tagName className 
           //tagName 属性获取的是大写的标签名
           if (target.tagName === 'LI') {
            console.log(target.innerHTML)

           }
       }

    </script>
</body>
</html>